<template>
  <div style="height: 200px;overflow: hidden;">
    <div class="box" :style="{ transitionDuration: `${transitionDuration}ms`, transform: `translateY( ${translateX}px)`}">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>1</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 当前滚动高度
const translateX = ref(0)
// 过渡时间
const transitionDuration = ref(500)

// 每次滚动高度
const translateValue = 200
// 滚动项个数
const switeCount = 4

onMounted(() => {
  setInterval(() => {
    translateX.value -= translateValue
    transitionDuration.value = 500
    if(translateX.value === -translateValue * switeCount) {
      setTimeout(() => {
        translateX.value -= translateValue
        transitionDuration.value = 0
        translateX.value = 0
      }, 600)
    }
  }, 2000)
})

</script>

<style scoped>

.box div {
  width: 300px;
  height: 200px;
  background-color: aquamarine;
}
</style>
